<template>
  <view class="category-page">
    <scroll-view scroll-y="true" class="scroll-left">
      <view :class="['scroll-view-item', leftIndex === index ? 'active' : '']" v-for="(item, index) in rootCategoryList" :key="item.id" @click="clickLeftItem(item, index)">{{item.name}}</view>
    </scroll-view>
    <scroll-view scroll-y="true" class="scroll-right">
      <view class="adv-img">
        <u-image border-radius="10" width="100%" height="180" :src="advImage"></u-image>
      </view>
      <u-grid :col="3" :border="false">
        <u-grid-item v-for="item in curChildCategoryList" :key="item.id">
          <u-image border-radius="10" width="120" height="120" :src="item.img"></u-image>
          <view class="grid-text">{{item.name}}</view>
        </u-grid-item>
      </u-grid>
    </scroll-view>
  </view>
</template>

<script>
	import Category from '@/model/category.js'
  export default {
    data () {
      return {
        leftIndex: 0,
				rootCategoryList: [],
				childCategoryList: [],
				advImage: ''
      }
    },
		onLoad() {
			this.getAllCategory()
		},
		computed: {
			curChildCategoryList() {
				if (this.childCategoryList.length > 0 && this.rootCategoryList.length > 0) {
					return this.childCategoryList.filter(item => this.rootCategoryList[this.leftIndex].id === item.parentId)
				} else {
					return []
				}
			},
		},
    methods: {
			/**
			 * 获取一级分类
			 */
			async getAllCategory() {
				const res = await Category.getAllCategory();
				this.rootCategoryList = res.root
				this.childCategoryList = res.sub
				this.advImage = this.rootCategoryList[this.leftIndex].img
				console.log(res)
			},
			/**
			 * 获取子分类
			 */
			async getChildCategory() {
				this.childCategoryList = await Category.getChildCategory();
			},
      clickLeftItem (item, index) {
        this.leftIndex = index
				this.advImage = this.rootCategoryList[this.leftIndex].img
      }
    }
  }
</script>

<style lang="scss" scoped>
  .category-page {
    height: 100%;
    display: flex;

    .scroll-left {
      width: 180rpx;
      background: #F4F4F4;

      .scroll-view-item {
        width: 100%;
        height: 90rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #333333;
        font-size: 28rpx;

        &.active {
          color: #FA3534;
          font-size: 28rpx;
          font-weight: bold;
          position: relative;
          background: #FFFFFF;

          &:after {
            content: '';
            position: absolute;
            left: 0;
            top: 30rpx;
            bottom: 30rpx;
            width: 4rpx;
            border-radius: 4rpx;
            background: #FA3534;
          }
        }
      }
    }

    .scroll-right {
      flex: 1;
      background: #FFFFFF;

      .adv-img {
        padding: 20rpx;

      }
      .grid-text {
        margin-top: 10rpx;
        font-size: 24rpx;
        color: #333333;
      }
    }
  }
</style>
